<template>
    <div class="record-item">
        <div class="black name">{{ data.categoryNameList?data.categoryNameList.join('-'):undefined }}</div>
        <div class="bracket">
            <div>
                （总正价平均毛利率：
                    <span v-if="!isShow.includes(data.normalPriceGrossMargin)" class="black">{{ data?.normalPriceGrossMargin}}%</span>
                    <span v-else>--</span>
                <img :src="Number(data.normalPriceGrossMargin) > 0 ? up : down" alt=""
                    v-if="Number(data.normalPriceGrossMargin)">
            </div>
            <div>
                总特价平均毛利率：
                <span class="black" v-if="!isShow.includes(data.specialPriceGrossMargin)">{{ data?.specialPriceGrossMargin}}%</span>
                <span v-else>--</span>
                <img :src="Number(data.specialPriceGrossMargin)>0 ? up : down" alt=""
                    v-if="Number(data.specialPriceGrossMargin)">
            </div>
            <div>
                综合平均毛利率：
                <span class="black" v-if="!isShow.includes(data.compositeGrossMargin)">{{ data?.compositeGrossMargin
                    }}%</span>
                <span v-else>--</span>
                <img :src="Number(data.compositeGrossMargin)>0 ? up : down" alt=""
                    v-if="Number(data.compositeGrossMargin)">
                ）
            </div>
        </div>
    </div>
</template>
<script setup>
import up from "@/assets/images/up.png";
import down from "@/assets/images/down.png";

defineProps({
    data: {
        type: Object,
        required: true,
        default: () => ({})
    }
})
const isShow=[undefined,null]
</script>
<style lang="scss" scoped>
.record-item {
    color: #86909C;
    display: flex;
    align-items: center;
    cursor: pointer;

    div {
        display: flex;
        align-items: center;
    }

    .bracket {
        gap: 16px;
    }

    img {
        width: 16px;
        height: 16px;
    }
}

.black {
    color: #333;
}
.name{
    color: #333;
    font-weight: bold;
}
</style>